<template>
  <div class="case">
    <div class="title">
      <img src="../assets/circle.png" alt="" />
      <p>{{ title }}</p>
    </div>
    <div class="line1">
      <img src="../assets/line1.png" alt="" srcset="" />
    </div>
    <div class="content" v-if="!isEmpty">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: "CaseBox",
  props: ['title','isEmpty'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.title, "props");

    return {};
  },
};
</script>

<style lang="scss" scoped>
.case {
  z-index: 10;
  width: 4.5rem;
  margin-bottom: .3rem;
  .title{
    display: flex;
    align-items: center;
    img{
      width: .2rem;
      margin:0 .1rem;
    }
    p{
      font-size: .2rem;
      font-weight: 700;
    }
  }
  .line1{
    margin-top: -.2rem;
    img{
      width: 4.5rem;
    }
  }
  .content{
    margin-top: .2rem;
  }
}
</style>
